<template>
	<view class="mainbgc" v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'客户结算查询',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexleft" @click="show=true">筛选</view>
			</view>
		</header-top>
		<view class="mainpadding2">
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage"></view>
			</view>
			<view class="" style="padding-bottom: 120rpx;">
				<view class="ffffff radius mainpadding_top" v-for="item in list.data" :key="item.id"
					@click="jumpdetail(item.id,75)">
					<view class="flexbetween">
						<view class="titletext">{{item.custom.name}}</view>
						<view class="titletext" style="color: #0BBDCB;">{{item.pay_price}}</view>
					</view>
					<view class="flexbetween margin_top2">
						<view class="xiaohui">客户姓名：{{item.custom.username}} {{item.custom.mobile}}</view>
						<view class="xiaohui">等级：{{item.custom.customlevel.name}}</view>
					</view>
					<view class="flexbetween margin_top2">
						<view class="xiaohui">业务姓名：{{item.staff.username}} {{item.staff.mobile}}</view>
						<view class="xiaohui">部门：{{item.staff.staffbm.name}}</view>
					</view>
					<view class="xiaohui margin_top2">订单编号：{{item.order_no}}</view>
					<view class="xiaohui margin_top2">{{item.createtime_text}}</view>
				</view>
			</view>
			<view class="posibottom" style="bottom: 30rpx;">
				<view class="onebox flexcenter flex_wrap">
					<view class="huangse">共{{dataAll.data.total}}笔，</view>
					<view class="huangse" style="color: #ff0000;">收欠款{{dataAll.total_price}}元</view>
				</view>
			</view>
		</view>
		<u-popup round="20" :show="show" @close="show=false">
			<view class="mainpadding">
				<view class="flexcenter">
					<view class="titletext">筛选</view>
				</view>
				<view class="strongtext margin_top">时间</view>
				<view class="flexleft" style="flex-wrap: wrap;">
					<view class="screenbox flexcenter" v-for="(item,index) in datelist" :key="item.id"
						@click="change(item.name,index)">
						<view :class="currents == index? 'itemscreenfocus margin_top':'itemscreen margin_top'">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="strongtext margin_top">自定义时间</view>
				<view class="flexleft">
					<view class="inputscreenbox flexcenter" @click="shows=true">
						<input class="itemscreen margin_top" type="text" disabled v-model="start">
					</view>
					<view class="zwscreenbox flexcenter">
						<view class="strongtext">-</view>
					</view>
					<view class="inputscreenbox flexcenter" @click="showss=true">
						<input class="itemscreen margin_top" type="text" disabled v-model="end">
					</view>
				</view>
				<view class="itemscreens flexleft margin_top"
					@click="selectRole('/pages/workbench/jiben/yuangongda?type=2')">
					<view class="strongtext minwidth">员工</view>
					<view class="rightscreen flexbetween">
						<input type="text" class="strongtext" disabled="true" placeholder="请选择员工"
							v-model="send_staff_name">
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="itemscreens flexleft margin_top"
					@click="selectRole('/pages/workbench/jiben/kehuda?type=1')">
					<view class="strongtext minwidth">客户</view>
					<view class="rightscreen flexbetween">
						<input type="text" class="strongtext" disabled="true" placeholder="请选择客户" v-model="custom_name">
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="itemscreens flexleft margin_top" @click="khDengJiShow = true">
					<view class="strongtext minwidth">等级</view>
					<view class="rightscreen flexbetween">
						<input type="text" class="strongtext" disabled="true" placeholder="请选择等级"
							v-model="khDengJiText">
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="flexbetween">
					<view class="surebtn reset flexcenter" style="margin-top: 60rpx;" @click="resetbtn">重置</view>
					<view class="surebtn flexcenter" style="margin-top: 60rpx;" @click="init">确认</view>
				</view>
			</view>
		</u-popup>
		<u-datetime-picker :show="shows" v-model="value1" mode="date" @confirm="confirm" @cancel="shows=false"
			@close="shows=false"></u-datetime-picker>
		<u-datetime-picker :show="showss" v-model="value2" mode="date" @confirm="confirms" @cancel="showss=false"
			:minDate="mintime" @close="showss=false"></u-datetime-picker>
		<selectKHDengJi :message="{khDengJiShow:khDengJiShow}" @khDengJiSure="khDengJiSure"></selectKHDengJi>
		<!-- 客户等级 -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				// 筛选开始
				// 时间选择
				datelist: [{
						id: 1,
						name: '今日'
					},
					{
						id: 2,
						name: '昨日'
					},
					{
						id: 3,
						name: '本月'
					},
				],

				show: false, //筛选弹出层
				// 时间筛选
				currents: -1,
				start: '开始时间',
				end: '结束时间',
				shows: false,
				showss: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				mintime: Number(new Date()),
				maxtime: Number(new Date()),
				// 筛选结束
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				custom_id: "", //客户ID
				custom_name: "", //客户名称
				send_staff_id: "", //送货员ID
				send_staff_name: "", //送货员名称、
				// 客户等级
				khDengJiShow: false,
				khDengJiText: "",
				custom_level_id: "", //客户等级ID
				dataAll:{},
				pageShow:false
			}
		},
		onLoad() {
			this.init()
		},
		onShow() {
			uni.$off('khSelectFn');
			uni.$on('khSelectFn', (data) => {
				this.custom_id = data.id
				this.custom_name = data.name
				return false
			})
			uni.$off('ygSelectFn');
			uni.$on('ygSelectFn', (data) => {
				this.send_staff_id = data.id
				this.send_staff_name = data.name
				return false
			})

		},
		methods: {
			selectRole(url) {
				uni.navigateTo({
					url
				})
			},
			init(isPage, page) {
				let _this = this;
				this.show = false
				httpRequest.request('/dhtapi/Customjs/index', 'POST', {
					page: page || 1,
					limit: _this.limit,
					startdate: this.start == '开始时间' ? '' : this.start, //开始日期
					enddate: this.end == '结束时间' ? '' : this.end, //结束日期
					staff_id: this.send_staff_id,
					custom_level_id: this.custom_level_id,
					custom_id: this.custom_id
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = resList
							_this.list.data = resList.data;
						}
						this.dataAll = res.data
						this.pageShow = true
						
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			jumpdetail(id, qxpdid) {
				if (!httpRequest.qxpd(qxpdid, this.$store.state.userInfo.ability_rule_ids)) {
					return false
				}
				uni.navigateTo({
					url: "/pages/workbench/caiwu/kehujsdetail?id=" + id
				})
			},
			khDengJiSure(e) { //客户等级
				if (e) {
					this.khDengJiText = e.value[0].name
					this.custom_level_id = e.value[0].id
				}
				this.khDengJiShow = false
			},
			// 筛选开始
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day

				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			confirm(e) {
				console.log(e);
				this.shows = false;
				this.show = true;
				this.end = '结束时间';
				this.mintime = e.value;
				this.start = this.date(e.value);
				this.currents = -1;
			},
			confirms(e) {
				this.showss = false;
				this.show = true;
				this.maxtime = e.value;
				this.end = this.date(e.value);
				this.currents = -1;
			},

			change(name, index) {
				if (name == "今日") {
					this.start = this.riqi(0);
					this.end = this.riqi(0);
				} else if (name == "昨日") {
					this.start = this.riqi(-1);
					this.end = this.riqi(-1);
				} else if (name == "本月") {
					this.start = this.benyue();
					this.end = this.riqi(0);
				}
				this.currents = index;
			},
			// 昨天“-1”今天“0”明天“1”
			riqi(day) {
				let dd = new Date();
				dd.setDate(dd.getDate() + day);
				let y = dd.getFullYear();
				let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
				let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				return y + "-" + m + "-" + d;
			},
			// 本月第一天
			benyue() {
				let y = new Date().getFullYear(); //获取年份
				let m = new Date().getMonth() + 1; //获取月份
				let d = '01'
				m = m < 10 ? '0' + m : m; //月份补 0
				return [y, m, d].join("-")
			},
			// 重置
			resetbtn() {
				this.currents = -1
				this.start = "开始时间"
				this.end = "结束时间"
				this.custom_id = "" //客户ID
				this.custom_name = "" //客户名称
				this.send_staff_id = "" //送货员ID
				this.send_staff_name = "" //送货员名称、
				// 客户等级
				this.khDengJiShow = false
				this.khDengJiText = ""
				this.custom_level_id = "" //客户等级ID
				this.init()
				this.show = false
			},
			// 筛选结束
		}
	}
</script>

<style lang="scss" scoped>
	// 筛选样式开始
	.inputscreenbox {
		width: 40%;

		input {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 50rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333;
			background-color: #f7f9fa;
		}
	}

	.zwscreenbox {
		width: 20%;
		line-height: 80rpx;
	}

	.itemscreenfocus {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		background-color: #e7f9fa;
	}

	.screenbox {
		width: 33.33%;
	}

	.itemscreen {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		background-color: #f7f9fa;
	}

	.surebtn {
		width: 45%;
		border: #27b366 1rpx solid;
	}

	.reset {
		background: #fff;
		color: #27b366;
		border: #27b366 1rpx solid;
	}


	.minwidth {
		min-width: 130rpx;
	}

	.rightscreen {
		width: 100%;
	}

	.itemscreens {
		padding-bottom: 20rpx;
	}

	// 筛选样式结束
	.posibottom {
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.greentext {
		color: #01b757;
	}
</style>